<template>
  <div class="app-container">
    <el-dialog :title="prop.title" :visible.sync="prop.open" width="680px" :close-on-click-modal="false" :show-close="false" destroy-on-close append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="职级名称" prop="gradeName">
              <el-input v-model="form.gradeName" placeholder="请输入职级名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="职级编码" prop="gradeCode">
              <el-input v-model="form.gradeCode" placeholder="请输入职级编码" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" :loading="saveLoading">确 定</el-button>
        <el-button @click="cancel({isSaveData:false})">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { getDetail, add, edit } from '@/api/organization/grade/grade.js';
  export default {
    name: "PostGradeEdit",
    dicts: [],
    components: { },
    props:{
      prop:{
        type:Object,
        default:function(){
          return {
            open:false,
            title:'新增',
            editId:null,
          }
        }
      }
    },
    data() {
      return {
        saveLoading:false,
        // 表单参数
        form: {
          gradeName:null,
          gradeCode:null,
          gradeId:null,
        },
        isEdit:false,
        // 表单校验
        rules: {
          gradeName: [
            { required: true, message: "请输入职级名称", trigger: "blur" }
          ],
          gradeCode: [
            { required: true, message: "请输入职级编码", trigger: "blur" }
          ]
        }
      };
    },
    methods: {
      getDetail(id){
        getDetail({gradeId:id}).then(res =>{
          this.form = {...res.data}
        }).catch(err =>{
          console.log('查询职级详情失败，原因：',err)
        })
      },
      /** 提交按钮 */
      submitForm: function() {
        this.saveLoading = true
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.isEdit) {
              edit(this.form).then(response => {
                this.saveLoading = false
                this.$modal.msgSuccess("修改成功");
                this.cancel({isSaveData:true})
              }).catch(err =>{
                console.log('保存失败，原因：',err)
                this.saveLoading = false
              });
            } else {
              add(this.form).then(response => {
                this.saveLoading = false
                this.$modal.msgSuccess("新增成功");
                this.cancel({isSaveData:true})
              }).catch(err =>{
                console.log('保存失败，原因：',err)
                this.saveLoading = false
              });
            }
          }else{
            this.saveLoading = false
          }
        });
      },
      // 表单重置
      reset() {
        this.isEdit = false
        this.form = {
          gradeName:null,
          gradeCode:null,
          gradeId:null,
        };
      },
      // 取消按钮
      cancel(params) {
        this.reset()
        this.$emit('close',params.isSaveData)
      },
    },
    mounted() {
      if(this.prop.editId!==null){
        this.isEdit = true
        this.getDetail(this.prop.editId)
      }
    },
  };
</script>
<style scoped>

</style>
